<template>
  <div>
    <el-row>
      <el-card shadow="hover">
        <el-radio v-for="custom_theme in dir_custom_themes" :key="custom_theme.data" v-model="radio" :label="custom_theme.data">{{ custom_theme.label }}</el-radio>
      </el-card>
    </el-row>
    <el-row :span="8" style="margin-top:15px;">
      <el-card v-show="radio==='default'" ref="default" shadow="hover">
        默认
      </el-card>
      <el-card v-show="radio==='image'" ref="image" shadow="hover">
        图片
      </el-card>
      <el-card v-show="radio==='color'" ref="color" shadow="hover">
        <div class="box">
          <div :style="{'width': '126px', 'height': '40px'}">选择</div>
          <div :style="{'width': '126px', 'height': '40px'}">主面板背景</div>
          <div :style="{'width': '126px', 'height': '40px'}">标签栏背景</div>
          <div :style="{'width': '126px', 'height': '40px'}">标签背景</div>
          <div :style="{'width': '126px', 'height': '40px'}">6666</div>
          <div :style="{'width': '126px', 'height': '40px'}">左侧菜单栏</div>
        </div>
        <div v-for="(item,index) in theme_colors" :key="index" class="box">
          <div style="width:126px;text-align:left;"><el-radio v-model="color" :label="item.name">{{ item.name }}</el-radio></div>
          <div :style="{'width': '126px', 'height': '40px','background-color':item.colors[0]}">{{ item.colors[0] }}</div>
          <div :style="{'width': '126px', 'height': '40px','background-color':item.colors[1]}">{{ item.colors[1] }}</div>
          <div :style="{'width': '126px', 'height': '40px','background-color':item.colors[2]}">{{ item.colors[2] }}</div>
          <div :style="{'width': '126px', 'height': '40px','background-color':item.colors[3]}">{{ item.colors[3] }}</div>
          <div :style="{'width': '126px', 'height': '40px','background-color':item.colors[4]}">{{ item.colors[4] }}</div>
        </div>
      </el-card>
    </el-row>
  </div>

</template>

<style scoped>
  .box {
    width:100%;
    margin-top:5px;
  }
  .box>div{
    text-align:center;
    line-height:40px;
    display: inline-block;
  }
</style>

<script>
// const version = require('element-ui/package.json').version // element-ui version from node_modules
// const ORIGINAL_THEME = '#409EFF' // default color
import { setDefaultTheme, setImageTheme, setColorTheme } from '@/utils/theme'
import request from '@/utils/request'
export default {
  data() {
    return {
      radio: 'default',
      color: '洋葱花',
      defaultColor: { 'name': '洋葱花', 'colors': ['#EACF02', '#6C890B', '#ABC327', '#DFB5B7', '#7F1874'], 'enabled': '0' },
      chalk: '', // content of theme-chalk css
      theme: '',
      theme_colors: [{ 'name': '洋葱花', 'colors': ['#EACF02', '#6C890B', '#ABC327', '#DFB5B7', '#7F1874'], 'enabled': '0' }]
    }
  },
  computed: {
    dir_custom_themes: function() {
      return this.$store.getters['directory/getDirectory']('custom_themes')
    }
  },
  watch: {
    radio(newVar) {
      if (newVar === 'default') {
        this.setDefaultTheme()
      } else if (newVar === 'image') {
        this.setImageTheme()
      } else if (newVar === 'color') {
        this.setColorTheme()
      }
      this.$store.dispatch('settings/changeSetting', { key: 'custom_themes', value: newVar })
    },
    color(newVar) {
      const color = this.getColor(newVar)
      this.$store.dispatch('settings/changeSetting', { key: 'themeDefaultColors', value: color })
      this.setColorTheme()
    }
  },
  created: function() {
    this.radio = this.$store.state.settings.custom_themes
    this.color = this.$store.state.settings.themeDefaultColors.name
    this.$store.commit('directory/setDirectory', 'custom_themes')
    this.queryJsonDirectory()
  },
  methods: {
    setDefaultTheme: function() {
      setDefaultTheme()
    },
    setImageTheme: function() {
      setImageTheme()
    },
    setColorTheme: function() {
      setColorTheme()
    },
    getColor: function(name) {
      let color
      for (let i = 0; i < this.theme_colors.length; i++) {
        const item = this.theme_colors[i]
        if (item.name === name) {
          color = item
          break
        }
      }
      return color
    },
    // 查询json字典
    queryJsonDirectory: function() {
      request({
        url: '/preset/json_dictionary/queryJsonDictionaryByCode',
        method: 'post',
        data: {
          code: 'themeColor'
        }
      }).then(res => {
        if (res.result) {
          if (res.data) {
            const self = this
            const colors = JSON.parse(res.data.content) || []
            colors.forEach(item => {
              self.theme_colors.push(item)
            })
          }
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { })
    }
  }
}
</script>

<style>

</style>
